import React, { useState } from 'react';

import QRCode from 'qrcode.react';
import {QrReader} from 'react-qr-reader';

function BooksSchema() {
  const [qrData, setQrData] = useState('');
  const handleScan = data => {
    console.log(data)
    if (data) {
      setQrData(data);
    }
  }
  const handleError = err => {
    console.error(err);
  }
  let changeCanvasToPic = () => {
    const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
    const img = new Image();
    img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
    const downLink = document.getElementById('down_link');
    downLink.href = img.src;
    downLink.download = '二维码'; // 图片name
  };
  return (
    <div>
      <QrReader
        delay={300}
        onError={handleError}
        onScan={handleScan}
        style={{ width: '100%' }}
      />
      <p>{qrData}</p>
      {/* <QRCode
        id="qrCode"
        value="http://localhost:3000/books"
        size={200} // 二维码的大小
        fgColor="#000000" // 二维码的颜色
        style={{ margin: 'auto' }}
        imageSettings={{ // 二维码中间的logo图片
          src: 'logoUrl',
          height: 100,
          width: 100,
          excavate: true, // 中间图片所在的位置是否镂空
        }}
      />
      <a id="down_link" onClick={changeCanvasToPic}>
        点击下载
      </a> */}

    </div>
  )
}

export default BooksSchema

